<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 头部 -->
      <page-header>
        <template #left>
          <span>总记录数：{{ total }}条</span>
        </template>
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/employees/upload-excel')">
            Excel上传
          </el-button>
          <el-button type="danger" size="small" @click="handleDownload">Excel下载当前页</el-button>
          <el-button type="success" size="small" @click="handleDownAll">Excel下载所有</el-button>
          <el-button type="primary" size="small" @click="showDialog = true">新增员工</el-button>
        </template>
      </page-header>
      <!-- 主体内容，表格 -->
      <el-card>
        <el-table :data="employeeList" boder stripe width="100%">
          <el-table-column label="序号" width="85" type="index" :index="indexMethod" />
          <el-table-column label="姓名" prop="username" width="100" />
          <el-table-column label="头像">
            <!-- 自定义列内容，参数为{row,column,$index} -->
            <template #default="{ row }">
              <img
                v-imgerror="defaultAvatar"
                :src="row.staffPhoto"
                alt=""
                style="height: 80px; width: 100%"
                @click="handleQrCode(row.staffPhoto)"
              />
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" width="120" />
          <el-table-column label="工号" prop="workNumber" width="85" />
          <el-table-column label="聘用形式" prop="formOfEmployment" width="85">
            <template #default="{ row }">
              {{ formatEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" width="85" />
          <el-table-column label="入职时间" prop="correctionTime" width="120" />
          <el-table-column label="账户状态" width="120">
            <template #default="{ row }">
              {{ formatEnableState(row.enableState) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template #default="{ row }">
              <!-- <el-button v-permission="'point-query'" type="text" @click="$router.push(`/employees/${row.id}`)"> -->
              <el-button type="text" @click="$router.push(`/employees/${row.id}`)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="handleOpen(row.id)">角色</el-button>
              <el-button v-permission="'point-del'" type="text" @click="handleDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          :total="total"
          :page-size="query.size"
          :current-page="query.page"
          :page-sizes="[3, 5, 6, 10]"
          layout="total,sizes,prev,pager,next,jumper"
          style="margin-top: 20px; margin-left: 20%"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-card>
      <!-- 新增员工弹框 -->
      <add-employee :show-dialog.sync="showDialog" @add-success="getEmployeeList" />
      <el-dialog title="二维码" width="18.5%" :visible="isShow" @close="isShow = false">
        <!-- 这里展示二维码图片 -->
        <canvas ref="qrCodeRef" />
      </el-dialog>

      <!-- 分配角色弹框 -->
      <el-dialog title="分配角色" :visible="isShow2" @close="handleClose">
        <!-- 复选框组 -->
        <el-checkbox-group v-model="checkedRoleList">
          <!--
            1.如果没有插槽：label:两个用途，即是展示的文本 也是提供给v-model用的
            2.如果有了插槽，插槽的内容是给用户展示用的
           -->
          <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
        <template #footer>
          <el-button size="small" type="primary" @click="handleClose">取消</el-button>
          <el-button size="small" type="primary" @click="handleAssign">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getEmployeeListAPI, delEmployeeAPI, getEmployeeInfoAPI, assignRoleAPI } from '@/api/employees'
// 模块化语法导入默认头像地址
import defaultAvatar from '@/assets/common/mm.png'
// 导入常量模块
import obj from '@/constant/employees'
// 导入 add-employee添加员工组件
import AddEmployee from './components/add-employee.vue'
// Excel文件的导入和导出
// 导入：把Excel文件中的数据读到内存中，读出来就是一个数组，基于数组做列表渲染

// import { export_table_to_excel } from '@/vendor/Export2Excel'
import { export_json_to_excel } from '@/vendor/Export2Excel.js'
import QrCode from 'qrcode'

// 获取角色详情
import { getRoleListAPI } from '@/api/settings'
export default {
  name: 'EmployeesView',
  components: { AddEmployee },
  data () {
    return {
      // 员工列表
      employeeList: [],
      total: 0,
      query: {
        page: 1,
        size: 10
      },
      // 声明默认导入头像地址变量
      defaultAvatar,
      // 控制新增员工弹框的显示与隐藏
      showDialog: false,
      // 控制二维码弹框显示与隐藏
      // 画布
      isShow: false,
      // 控制分配角色的弹框显示与隐藏
      isShow2: false,
      // 所有角色列表
      roleList: [],
      // 选中的角色列表
      checkedRoleList: []
    }
  },
  created () {
    this.getEmployeeList()
  },
  methods: {
    // 分配角色
    async handleAssign () {
      // 发起请求
      // 因为id不在标签中插值使用，所以不用在data中声明
      // 发请求：把选中的角色状态同步到数据库
      await assignRoleAPI(this.id, this.checkedRoleList)
      this.handleClose()
      this.$message.success('分配角色成功')
    },
    // 分配角色弹框打开时
    async handleOpen (employeeId) {
      // 保存当前角色id给分配角色使用
      this.id = employeeId
      this.isShow2 = true
      // 发起获取所有角色列表的请求
      const resp1 = await getRoleListAPI({
        page: 1,
        pagesize: this.total // 获取所有条数
      })
      // 保存角色列表
      this.roleList = resp1.data.rows
      // 获取当前员工信息(获取当前员工的角色信息)
      const resp2 = await getEmployeeInfoAPI(employeeId)
      // 回显(给v-model绑定的数组赋值角色id数组)
      this.checkedRoleList = resp2.data.roleIds
    },
    // 分配角色弹框关闭时
    handleClose () {
      this.isShow2 = false
      // 重置v-model绑定的数组
      this.checkedRoleList = []
    },
    // 获取员工列表
    async getEmployeeList () {
      // 发起获取员工请求
      const { data } = await getEmployeeListAPI(this.query)
      // console.log(data)
      const { rows, total } = data
      // 赋值
      this.employeeList = rows
      // console.log(this.employeeList)
      this.total = total
    },
    // 自定义序号
    indexMethod (index) {
      return (index + 1) + (this.query.page - 1) * (this.query.size)
    },
    // 格式化聘用形式
    formatEmployment (formOfEmployment) {
      // formOfEmployment
      // 1-> 正式工
      // 2-> 非正式
      // 3-> 实习工
      // 4-> 临时工
      // const obj = {
      //   1: '正式工',
      //   2: '非正式',
      //   3: '实习工',
      //   4: '钟点工',
      //   5: '扫地僧'
      // }
      // 根据formOfEmployment去hireType(obj中的一个数组)中查找
      const item = obj.hireType.find(item => item.id === formOfEmployment)
      // 如果item没有值是undefined
      // 通过key,得到对象的值返回
      return item ? item.value : '未知'
    },
    // 格式化账户状态
    formatEnableState (enableState) {
      const item = obj.workingState.find(item => item.id === enableState)
      return item ? item.value : '未知'
    },
    // 每页条数改变时
    handleSizeChange (val) {
      // 把选择的条数同步到query.size中
      this.query.size = val
      // 获取员工列表
      this.getEmployeeList()
    },
    // 当前页显示的条数
    handleCurrentChange (val) {
      // 把选择的页码同步到query.page中
      this.query.page = val
      // 获取员工列表
      this.getEmployeeList()
    },
    // 删除员工数据
    async handleDel (employeeId) {
      // 在删除之前，判断当前员工是否具备point-del这个权限点
      // 如果没有，给个提示，直接return

      try {
        // 询问
        this.$confirm('此操作不可逆，您确定要删除吗？', '温馨提示', {
          type: 'warning',
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        })
        // 如果当前不是第一页，并且employeeList只有一条数据
        if (this.query.page > 1 && this.employeeList.length === 1) {
          // 让页码自减
          this.query.page--
        }
        // 发删除请求
        await delEmployeeAPI(employeeId)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        // 获取员工列表
        this.getEmployeeList()
      } catch (error) {
        // 取消 or 错误提示
        this.$message(error)
      }
    },
    // 下载Excel文件--当前页
    handleDownload () {
      const header = ['姓名', '手机号', '部门', '工号', '聘用形式', '入职日期', '转正日期']
      // 员工列表：[ { },{ },{ } ]
      // 目标：[ [ ],[ ],[ ] ]
      // 对应关系
      const headerRalation = {
        手机号: 'mobile',
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        转正日期: 'correctionTime',
        聘用形式: 'formOfEmployment',
        部门: 'departmentName'
      }
      // 处理employeeList,得到二维数组
      const data = this.employeeList.map(item => {
        const arr = []
        // 遍历header数组
        header.forEach(zhKey => {
          // 根据中文key,得到英文key
          const enKey = headerRalation[zhKey]
          // 根据得到的英文key从item对象中取出属性值,push到arr空数组中
          // 如果enKey是formOfEmployment,需要格式化处理
          if (enKey === 'formOfEmployment') {
            // 根据当前对象的聘用形式数字，去obj.hireType 常量数组查找
            const temp = obj.hireType.find(a => a.id === +item[enKey])
            // 三元表达式：如果找到了，item是个对象，则添加value属性：否则添加未知
            arr.push(temp ? temp.value : '未知')
          } else {
            arr.push(item[enKey])
          }
        })
        // 返回
        return arr
      })
      console.log(data)
      // 调用下载excel文件的方法
      export_json_to_excel({
        // 表头
        header,
        // 表体(二维数组)
        data,
        // 文件名
        filename: `${this.$store.state.user.userInfo.companyName}员工列表`
      })
    },
    // 下载Excel文件--所有员工信息
    async handleDownAll () {
      // const a = this.query.page
      // const b = this.query.size
      // 把数据总条数同步到query.size中
      this.query.size = this.total
      // 重置页码为1
      this.query.page = 1
      // 获取员工列表
      await this.getEmployeeList()
      // 调用下载当前页的方法
      this.handleDownload()
      // 重置
      // this.handleSizeChange(b)
      // this.handleCurrentChange(a)
    },
    // 点击图片控制二维码弹框显示
    handleQrCode (url) {
      if (!url) return
      // 显示弹框
      this.isShow = true
      console.log(this.$refs.qrCodeRef)
      this.$nextTick(() => {
        console.log(this.$refs.qrCodeRef)
        // 把点击的图片地址转为二维码（DOM，待转换的信息）
        QrCode.toCanvas(this.$refs.qrCodeRef, url)
      })
    }
  }
}
</script>

<style>
</style>
